<template>
  <div class="home">
    <div class="container">
      <div class="section-1">
        <div class="row">
          <div class="col">
            <vue-signature
              ref="s1"
              :width="width"
              :height="height"
              :stroke-size="strokeSize"
              :stroke-color="strokeColor"
            />
           
          </div>
          <!-- 图片 -->
          <!--div class="col">
            <img :src="signature" alt="signature" v-if="signature" class="signature">
            <div class="signature" :style="{ width: (parseInt(width) + 2) + 'px', height: (parseInt(height) + 2) + 'px' }" v-else></div>
          </div-->
        </div>
        <!--div class="btns2" style='margin-top:10px'>
          <el-button @click="deleteImg" type="primary">清空</el-button>
          <el-button @click="getSignature" type="primary">确定</el-button>
        </div-->
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
 
  data () {
    return {
      signature: '',
      strokeColor: '#000',
      strokeSize: 2,
      width: 640,
      height: 250
    }
  },
  methods: {
    getSignature () {
      return this.$refs.s1.getSignature()
    },
    deleteImg () {
      this.$refs.s1.clear()
      this.signature = ''
    }
  }
}
</script>

<style lang="scss">
</style>

